<template>
  <VueUeditorWrap
    ref="VueUeditor"
    v-model="message"
    :config="ueConfig"
    @ready="ready"
    @before-init="addCustomButtom"
    style="line-height: 22px;"
  />
</template>

<script>
  import VueUeditorWrap from 'vue-ueditor-wrap'
  export default {
    components: {
      VueUeditorWrap
    },
    props: ["content", "closeCustomizeToolbars", "menuObj"],
    data() {
      return {
        message: '',
        // 自定义编辑器工具栏
        toolbars1: [
            'fullscreen', 'source', '|', 'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
            'directionalityltr', 'directionalityrtl', 'indent', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
            'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
            'emotion', 'map', 'insertframe', 'insertcode', 'pagebreak', 'template', '|',
            'horizontal', 'date', 'time', 'spechars', '|',
            'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
            'print', 'preview', 'searchreplace', 'drafts', 'help'
        ],
        // 简易编辑器工具栏
        toolbars2: [
            'source', '|', 'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist','|',
            'lineheight', '|',
            'fontfamily', 'fontsize', 'indent', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
            'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|','horizontal','spechars', '|',
            'insertparagraphbeforetable', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', '|',
            'searchreplace'
        ],
        // 简单配置
        ueConfig:{
          // 自定义工具栏
          toolbars: [],
          autoHeightEnabled: true, // 编辑器是否自动被内容撑高
          autoFloatEnabled: false, // 工具栏是否可以浮动
          initialFrameHeight: 340, // 初始容器高度
          initialFrameWidth: '100%', // 初始容器高度
          enableAutoSave: true, // 关闭自动保存
          // 上传文件接口
          elementPathEnable: true,
          wordCount: false,
          focus: true,
          UEDITOR_HOME_URL: '/UEditor/',
          serverUrl: ''
        },
        data: {},
        editor: '',
        editorId: ''
      };
    },
    watch: {
      menuObj: {
        handler(newData, oldData) {

          this.data = Object.assign({}, newData)
          console.log(this.data)
        },
        // 代表在wacth里声明了templateForm这个方法之后立即先去执行handler方法
        immediate: true,
      },
      closeCustomizeToolbars: {
        handler(newData, oldData) {
          if(newData===0) { //默认工具栏
            delete this.ueConfig.toolbars
          } else if(newData===2) { // 简易编辑器工具栏
            this.ueConfig.toolbars.push(this.toolbars2)
          } else {  // 自定义编辑器工具栏
            this.ueConfig.toolbars.push(this.toolbars1)
          }
        },
        // 代表在wacth里声明了closeCustomizeToolbars这个方法之后立即先去执行handler方法
        immediate: true,
      }
    },
    created() {},
    mounted() {
      // 这里是从列表页编辑时做的内容注入，没有需要可以不写
      this.message = this.content;
    },
    methods: {
      // 初始化ueditor的实例
      ready(editorInstance) {
        this.editor = editorInstance
        // console.log(this.editor)
      },
      addCustomButtom (editorId) {
        let arr = Object.keys(this.data);
        if (arr.length == 0) {
          this.editorId = editorId
          return
        }
        let btnItem = this.data
        this.registerBtn(editorId, btnItem);
      },
      registerBtn (editorId, btnItem) {
        // console.log(btnItem)
        // let queryArtid = `<span class="text" data-mode="phone"> ${btnItem.text}：${btnItem.model}</span>`
        let queryArtid = `
       <table class="table_box" border="1" cellspacing="0" cellpadding="0" width="100%">
          <!--for():--> 
          <tr>
              <td width="10%">戒毒人员</td>
              <td></td>
              <td>居住地祥址</td>
              <td></td>
          </tr>
          <tr>
              <td><span class="work-break">居住地方位图</span></td>
              <td colspan="3"></td>
          </tr>
          <tr>
              <td><span class="work-break">居住地房屋照片</span></td>
              <td colspan="3"></td>
          </tr>
          <tr>
              <td><span class="work-break">备注</span></td>
              <td colspan="3"></td>
          </tr>
      </table>
       `
        window.UE.registerUI('customize-button', function (editor, uiName) {
          // console.log(editor)
          // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
          editor.registerCommand(uiName, {
            execCommand: function () {
              editor.execCommand('inserthtml', `${queryArtid}`)
            }
          })

          // 创建一个 button
          let btn = new window.UE.ui.Button({
            // 按钮的名字
            name: uiName,
            // 提示
            title: `文字${btnItem.text}`,
            // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
            // cssRules: "background-image: url('../assets/model.png') !important;background-size: cover;",
            // 点击时执行的命令
            onclick: function () {
              // 这里可以不用执行命令，做你自己的操作也可
              editor.execCommand(uiName)
            }
          })

          // 当点到编辑内容上时，按钮要做的状态反射
          editor.addListener('selectionchange', function () {
            var state = editor.queryCommandState(uiName)
            if (state === -1) {
              btn.setDisabled(true)
              btn.setChecked(false)
            } else {
              btn.setDisabled(false)
              btn.setChecked(state)
            }
          })

          // 因为你是添加 button，所以需要返回这个 button
          return btn
        }, 0 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */, editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */)
      },
      // 在当前光标位置插入html内容
      setContent (queryHtml) {
        this.editor.execCommand('inserthtml', queryHtml);
      }
    }
}
</script>

